<template>
  <div class="card">
    <el-row class="card-content easy-container flex">
      <el-col :span="8">
        <div
          class="custom-select-item"
          :class="{ 'is-active': activeItem === 'docs' }"
          @click="activeItem = 'docs'"
        >创建资源</div>
        <div
          class="custom-select-item"
          :class="{ 'is-active': activeItem === 'issues' }"
          @click="activeItem = 'issues'"
        >提出问题</div>
        <div
          class="custom-select-item"
          :class="{ 'is-active': activeItem === 'comments' }"
          @click="activeItem = 'comments'"
        >评论回复</div>
      </el-col>
      <el-col :span="16" v-loading="loading" class="flex">
        <div ref="chart" class="flex-1"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts';

export default {
  name: 'global-activities-echarts',
  props: {
    daterange: {
      type: Array,
      required: true,
    },
    chartSource: {
      type: Object,
      required: true,
    },
    loading: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      activeItem: 'docs',
      chart: undefined,
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    this.drawChart(); // 这是一次初始化，把横坐标画上
  },
  methods: {
    // 生成echarts需要的options
    initChartDefaultOptions(dataset = []) {
      return {
        grid: { left: 40, top: 16, right: 20, bottom: 34 },
        xAxis: { type: 'time', minInterval: 3600 * 24 * 1000 },
        yAxis: { type: 'value', minInterval: 1, boundaryGap: [0, 0.1] },
        series: [{ type: 'line', data: dataset }],
      };
    },
    // 画图
    drawChart() {
      const options = this.initChartDefaultOptions(this.chartSource[this.activeItem]);
      this.chart.setOption(options);
    },
  },
  watch: {
    chartSource: {
      handler() { this.drawChart(); },
      deep: true,
    },
    activeItem() { this.drawChart(); },
  },
};
</script>

<style></style>
